<template>
  <div class="look-down-wrap">
    <ul>
      <li>
        <i class="el-icon-view" title="浏览"></i>
        <p><span v-show="txtShow">浏览</span> {{ count.clickNum || 0 }}</p>
      </li>
      <li>
        <i class="iconfont icon-dianzan" title="点赞"></i>
        <p><span v-show="txtShow">点赞</span> {{ count.likeNum || 0 }}</p>
      </li>
      <li>
        <i class="el-icon-download" title="下载"></i>
        <p><span v-show="txtShow">下载</span> {{ count.downloadNum || 0 }}</p>
      </li>
      <li v-if="size == 5">
        <i class="el-icon-star-on" title="收藏"></i>
        <p><span v-show="txtShow">收藏</span> {{ count.collectNum || 0 }}</p>
      </li>
      <li v-if="size == 5">
        <i class="el-icon-share" title="分享"></i>
        <p><span v-show="txtShow">分享</span> {{ count.shareNum || 0 }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    txtShow: {
      type: Boolean,
      default: false,
    },
    size: {
      type: Number | String,
      default: 3,
    },
    count: {
      type: Object,
      default: () => ({
        clickNum: '0',
        collectNum: '0',
        downloadNum: '0',
        evaluateNum: '0',
        likeNum: '0',
        shareNum: '0',
      }),
    },
  },
}
</script>
<style scoped lang="scss" >
.look-down-wrap {
  display: inline-block;
  height: 24px;
  ul {
    li {
      float: left;
      line-height: 24px;
      margin-right: 25px;
      font-size: 14px;
      i {
        color: #666;
        font-size: 16px;
        float: left;
        margin-top: 4px;
        font-weight: bold;
        &.el-icon-view {
          color: #157ac7;
        }
        &.icon-dianzan {
          color: #bd1e1e;
        }
        &.el-icon-download {
          color: #14ab4d;
        }
        &.el-icon-star-on {
          color: #f40;
        }
        &.el-icon-share {
          color: #409eff;
        }
      }
      .icon-dianzan {
        margin-top: 0;
      }
      p {
        display: inline;
        margin-left: 4px;
        color: #666;
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  .look-down-wrap ul li {
    margin-right: 8px;
  }
}
</style>